<template>
	<view class="detail-page">
		<view class="content">
			<!-- 标题展示 -->
			<view class="form-item">
				<text class="form-label">标题</text>
				<text class="form-value">{{ form.title }}</text>
			</view>

			<!-- 内容展示 -->
			<view class="form-item">
				<text class="form-label">内容总结</text>
				<text class="form-content">{{ form.content }}</text>
			</view>

			<!-- 图片展示 -->
			<view class="form-item">
				<text class="form-label">图片</text>
				<u-album rowCount=4 :urls="form.images"></u-album>
			</view>
		</view>
		<view class="bottom-button">
			<u-button type="primary" color="#FFB900" icon="trash" text="删除记录" @click=""></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					content: '',
					images: []
				},
				currentIndex: -1
			};
		},
		onLoad(options) {
			// 接收路由参数并加载数据
			this.loadDetailData(options.itemId);
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			loadDetailData(itemId) {
				// 模拟从接口获取数据，实际项目中替换为真实接口调用
				this.form = {
					title: `示例标题 ${itemId}`,
					content: '这是一条示例内容，展示了详情页的数据格式和布局。实际内容会根据选中的列表项动态加载。这是一条示例内容，展示了详情页的数据格式和布局。实际内容会根据选中的列表项动态加载这是一条示例内容，展示了详情页的数据格式和布局。实际内容会根据选中的列表项动态加载',
					images: [
						'https://cdn.uviewui.com/uview/album/1.jpg',
						'https://cdn.uviewui.com/uview/album/2.jpg',
						'https://cdn.uviewui.com/uview/album/3.jpg',
						'https://cdn.uviewui.com/uview/album/4.jpg',
						'https://cdn.uviewui.com/uview/album/5.jpg',
						'https://cdn.uviewui.com/uview/album/6.jpg',
						'https://cdn.uviewui.com/uview/album/7.jpg',
					]
				};
			}
		}
	};
</script>

<style lang="scss">
	.detail-page {
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.content {
		padding: 30rpx;
	}

	.bottom-button {
		// 修改为固定定位
		position: fixed;
		bottom: 10rpx;
		left: 10rpx;
		right: 10rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 40rpx;
		background-color: #fff;
		padding: 25rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.form-label {
		display: block;
		margin-bottom: 15rpx;
		color: #606266;
		font-size: 28rpx;
		font-weight: 500;
	}

	.form-value {
		font-size: 32rpx;
		color: #333;
		line-height: 1.5;
	}

	.form-content {
		font-size: 30rpx;
		color: #606266;
		line-height: 1.6;
		white-space: pre-wrap;
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-top: 15rpx;
	}

	.image-item {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.u-image {
		width: 100%;
		height: 100%;
	}
</style>